<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="form.username" type="String" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
        <el-button @click="selfResetForm('refForm')">重置</el-button>
        <el-button @click="exportHandle" type="primary" icon="el-icon-download" v-if="roleCheck('export-redrain')">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData.pageinfo.list"
      v-loading="loading"
      show-summary
      :summary-method="getLocalSummaries"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column label="领取红包时间" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.receivedTime | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="loginIp" label="登录IP" align="center"></el-table-column>
      <el-table-column label="UUID（设备编号）" align="center">
        <template slot-scope="{row}">
          <div>{{row.deviceId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="领取红包金额（元）" width="180" align="center" prop="bonusAmount">
        <template slot-scope="{row}">
          <div>{{row.bonusAmount | currency}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.pageinfo.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {getSpringRedRainList as listApi,exportSpringRedRain} from "@/services/api/activity";
  import {grid} from '@/build'

  export default {
    name: "spring-recharge-list",
    mixins: [grid],
    data() {
      const time = [moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      const startTime = time[0],
        endTime = time[1];

      return {
        tableData: {
          pageinfo:{
           list:[] 
          }
        },
        localSummariesText:'当前页汇总 / 所有页汇总',
        form: {
          time,
          username: null,
        },
        filters: {
          size: 20,
          page: 1,
          startTime,
          endTime,
          username: null,
        },
        statistic: [
          {
            index: 4,
            prop: "bonusAmount",
            format: value => {
              return <div>{_.currency(value) } / {_.currency(this.tableData.allBonus)}</div>;
            }
          },
        ],
      }
    },
    methods: {
      selfResetForm(formName) {
        this.resetForm(formName);
        this.submitFilterForm();
      },
      submitFilterForm() {
        const {time, username} = this.form;
        let startTime = undefined, endTime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        this.filters = {...this.filters, username, startTime, endTime}
        this.gridSearch()
      },
      exportHandle() {
        let {username, startTime, endTime} = this.filters
        let ajaxData = {username, startTime, endTime}
        let filename = '红包雨活动明细报表.csv';
        let header = ['领取红包时间', '用户名', '登录IP','UUID（设备编号）','领取红包金额（元）']
        let filterField = ['receivedTime', 'userName', 'loginIp','deviceId','bonusAmount']
        exportSpringRedRain(ajaxData).then(([result, data]) => {
      if (result) {
            let exportData = this.responseFormatter(data.list);
            this.export2Excel(header, filterField, exportData, filename)

          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
       responseFormatter(data) {
        data.map(item => {
          item.receivedTime = _.toTime(item.receivedTime)
          item.bonusAmount = _.currency(item.bonusAmount)
        })

        return data
      }
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'活动查询',true)});
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        // format: data => {
        //   let result = [];
        //   _.forIn(data && data.list, (value, key) => {
        //     result.push({...value})
        //   })
        //   return result;
        // }
      });
      this.submitFilterForm();
    }

  }
</script>

<style scoped>

</style>
